<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-once</title>
</head>
<body>
    <script src="../vue@2.6.14.min.js"></script>
    <div id="app">
        <p v-once>当前的数值是: {{num}}</p>
        <button @click="num++">点击+1</button>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    num: 0,
                }
            }
        })
    </script>
    <h3>
        <ol>
            <li>
                v-once，绑定到某个标签上时，这个标签元素里的内容只会渲染一次。<br>
                后续不管发生什么，内容都不会再发生变化。
            </li>
            <li>
                这里需要区别的是，v-on指令也有一个once， 不过这个once是修饰符。
                是加在v-on指令上的，比如@click.once="handleClick"<br>
                而v-once是绑定在标签上的指令。<br>
                注意区分
            </li>
        </ol>
    </h3>
</body>
</html>